<template>
    <div class="back">
      <div class="left-box">
        <div class="l-text"><h3>后台管理</h3></div>
        <el-row class="tac">
          <el-col :span="12">
            <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @select="handleSelect"
                @close="handleClose">
              <el-menu-item index="1" @click="$router.push('/back/newUser')">
                <i class="el-icon-menu"></i>
                <span slot="title">管理页面</span>
              </el-menu-item>
              <el-menu-item  index="2"  @click="$router.push('/back/admission')">
                <i class="el-icon-menu"></i>
                <span slot="title">单招管理</span>
              </el-menu-item>
              <el-menu-item  index="3"  @click="$router.push('/back/information')">
                <i class="el-icon-menu"></i>
                <span slot="title">通知信息管理</span>
              </el-menu-item>
            </el-menu>

          </el-col>
        </el-row>
      </div>
      <div class="right-box">
        <div class="r-top">
          <div class="user">
            <div class="user-box">
              <el-dropdown size="medium" class="user-box" @command="handleCommand">
                <span class="el-dropdown-link">
                  <h3><b>{{ userInfo.nickname!==undefined?userInfo.nickname:"数据有误" }}</b></h3><i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item >退出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
        <div class="r-b">
          <router-view/>
<!--          <NewUser/>-->
        </div>
      </div>
    </div>

</template>

<script>
export default {
  name: "back",

  data() {
    return {
      userInfo: {},
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleCommand(){
      this.$router.push("/");
      localStorage.removeItem("zjjuser");
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },

  },
  //生命周期 一 创建完成(可以访问当前this实例)
  created() {
    let item = localStorage.getItem("zjjuser");
    this.userInfo = JSON.parse(item);
    if(item===undefined){
      this.$alert('尚未登录点击按钮前去登录', '您未登录', {
        confirmButtonText: '登录',
        callback: action => {
          this.$router.push("/")
        }
      });
    }

  },
  //生命周期 一 挂载完成(可以访问DOM元素)
  mounted() {

  },
  //生命周期 - 创建之前
  beforeCreate() {
  },
  //生命周期 - 挂载之前
  beforeMount() {
  },
  //生命周期 - 更新之前
  beforeUpdate() {
  },
  //生命周期 - 更新之后
  updated() {
  },
  //生命周期 - 销毁之前
  beforeDestroy() {
  },
  //生命周期 - 销毁完成
  destroyed() {
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
  },
}
</script>

<style scoped lang="less">
  .back{
    display: flex;
    .left-box{
      width: 8%;
      height: 1300px;
      background: #01affd;

      .l-text{
        display: inline-block;
        margin: 0 auto;
        padding: 50px;
      }
      .tac{
        width: 200%;
      }

    }

    .right-box{
      width: 92%;
      height: 100vh;

      .r-top{
        width: 100%;
        height: 70px;
        background: #f0f0f0;
        display: flex;
        justify-content:flex-end;
        .user{
          width: 200px;
          height: 100%;
          margin-right: 150px;
          h3{
            display: inline-block;
          }

          .user-box{
            width: 80px;
            display: inline-block;
            margin-top: 13px;
          }
        }
      }
      .r-b{
        height: 80vh;
        margin: 10px;
      }
    }

  }
</style>